<template>
    <div class="user_member">
        <wrapper-content pageTitle="公告管理">
            <div class="data-content">
                <div class="table-edit">
                    <div class="left-actions">
                        <Button permission="" type="primary" shape="circle" icon="plus" @click="addContent">
                            新增股票
                        </Button>
                    </div>
                    <div>
                        <span>停牌</span>
                        <Select v-model="stops" style="width:140px">
                            <Option v-for="item in stopList" :value="item.value" :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                        <span>买卖</span>
                        <Select v-model="deal" style="width:140px">
                            <Option v-for="item in dealList" :value="item.value" :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                        <span>查询</span>
                        <Input v-model="keyword" placeholder="搜索" style="width:140px"/>
                        <Button type="info">查询</Button>

                    </div>
                </div>
                <Table :loading="loading" border :columns="columns" :data="user_list" class="no-border-table"
                       @on-selection-change="selectItem"></Table>
                <Page v-if="userCount > 0" :total="userCount" :current="page_num" @on-change="changePage"
                      @on-page-size-change="changePageSize" size="small" show-total show-sizer class="table-page">
                    <slot class="total">共 {{ userCount }} 条</slot>
                </Page>
            </div>
        </wrapper-content>
        <Modal
                v-model="del_model"
                title="操作提示">
            <p>真的要删除当前选中项吗？一旦删除将无法恢复，请想好了再决定 </p>
            <div slot="footer">
                <Button type="text" @click="del_model = false">取消</Button>
                <Button type="error" :loading="send_loading" @click="delConfirm">删了</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import WrapperContent from '../../../components/wrapper-content.vue'
    import {
        getUserList,
        getUser,
        getLevelList,
        getPositionList,
        doUserInfo,
        delUser,
        changeUserState
    } from "@/api/user";
    import * as utils from '../../../assets/js/utils'
    import $ from 'jquery'
    import _ from 'lodash'

    export default {
        components: {
            WrapperContent,
        },
        data() {
            return {
                stops: '',
                stopList: [],
                deal: '',
                dealList: [],
                self: this,
                form_modal: false,
                form_action: 'add',
                form_title: '添加公告',
                form_url: 'add',
                form_submit: '添加',
                formValidate: {
                    agency: '',
                    id: '',
                    nickname: '',
                    pwd1: '',
                    pwd2: '',
                    usable_money: '',
                    min: 0,
                    max: 1000,
                    max_open_interest: 0,
                    idcard: '',
                    tel: '',
                    qq: '',
                },
                ruleValidate: {
                    account: [
                        {required: true, message: '用户编号不能为空', trigger: 'blur'}
                    ],
                    realname: [
                        {required: true, message: '用户昵称不能为空', trigger: 'blur'}
                    ]
                },
                level_list: [],
                position_list: [],
                del_model: false,
                select_users: [],
                send_loading: false,
                page_size: 10,
                page_num: 1,
                keyword: '',
                loading: true,
                dropdownItems:[
                    { val : '广东' , label : 'guangdong'},
                    { val : '深圳' , label : 'shenzhen'}
                ],
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'ID',
                        key: 'account',
                        width: 60,
                    },
                    {
                        title: '代码',
                        key: 'realname',
                        width: 100,
                    },
                    {
                        title: '名称',
                        key: 'realname',
                        width: 100,
                    },
                    {
                        title: '拼音',
                        key: 'action',
                    },
                    {
                        title: '类型',
                        key: 'action',
                    },
                    {
                        title: '板块',
                        key: 'action',
                    },
                    {
                        title: '停牌时间',
                        key: 'action',
                    },
                    {
                        title: '点差',
                        key: 'action',
                        render: (h, params) => {
                            return h('Dropdown', {
                                on: {
                                    'on-click': (value) => {
                                        console.log(value);//value和下面选项的name对应
                                        params.row.plate = value ;
                                    }
                                }
                            }, [
                                h('Button', params.row.plate),
                                h('DropdownMenu', {
                                        slot: "list"
                                    },
                                    this.dropdownItems.map(function (type) {//把map看作循环,type看作循环的每一项
                                        return h('DropdownItem', {
                                            props: {
                                                name: type.val
                                            }
                                        }, type.val)
                                    })
                                )]
                            )
                        }
                    },
                    {
                        title: '设置',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            event.stopPropagation(); //阻止冒泡
                                            this.operation(params.row.id, 0);
                                            // this.$router.push({path:'/content/add/1'})
                                        }
                                    }
                                }, '可买'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            event.stopPropagation(); //阻止冒泡
                                            this.operation(params.row.id, 1)
                                            // this.$router.push({path:'/content/add/1'})
                                        }
                                    }
                                }, '可卖'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            event.stopPropagation(); //阻止冒泡
                                            this.operation(params.row.id, 2)
                                            // this.$router.push({path:'/content/add/1'})
                                        }
                                    }
                                }, '无停'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            event.stopPropagation(); //阻止冒泡
                                            this.operation(params.row.id, 3)
                                            // this.$router.push({path:'/content/add/1'})
                                        }
                                    }
                                }, '退市'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            event.stopPropagation(); //阻止冒泡
                                            this.$router.push({path:'/system/stock/add/1'})
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            event.stopPropagation(); //阻止冒泡
                                            this.del_model = true;
                                        }
                                    }
                                }, '删除'),
                            ]);
                        }
                    }
                ],
                user_list: [{plate: '广东'}],
                userCount: 0,
            }
        },
        watch: {
            keyword: function (newQuestion) {
                this.search()
            },
            '$route'(to, from) { // 路由监听，重新获取数据
                if (this.$store.state.list_reload) {
                    this.getUserList()
                }
            }
        },
        created: function () {
            this.loading = false;
            this.userCount = 10;
            /*this.getUserList();
            this.getLevelList();
            this.getPositionList()*/
        },
        methods: {
            getUserList() {
                let app = this;
                getUserList(this.page_size, this.page_num, this.keyword).then(res => {
                    app.loading = false;
                    app.user_list = res.data.list;
                    app.userCount = Number(res.data.count)
                });
            },
            getInfo() {
                let app = this;
                getUser(app.formValidate.user_id).then(res => {
                    if (res.data) {
                        app.formValidate.user_id = res.data.id;
                        app.formValidate.account = res.data.account;
                        app.formValidate.realname = res.data.realname;
                        app.formValidate.level_id = res.data.level_id;
                        app.formValidate.position_id = res.data.position_id;
                        app.formValidate.state = res.data.state
                    }
                });
            },
            getLevelList() {
                let app = this;
                getLevelList(50).then(res => {
                    app.level_list = res.data.list
                });
            },
            getPositionList() {
                let app = this;
                getPositionList(50).then(res => {
                    app.position_list = res.data.list
                });
            },
            editItem(id) {
                this.formValidate.user_id = id;
                this.getInfo();
                this.form_modal = true;
                this.form_action = 'edit'
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if (this.formValidate.password !== this.formValidate.password_confirm) {
                            this.$Message.warning('两次输入的密码不相同');
                            return false
                        }
                        let app = this;
                        this.send_loading = true;
                        doUserInfo(app.form_url, app.formValidate).then(res => {
                            const code = res.ret;
                            const msg = res.msg;
                            if (code !== 200) {
                                app.$Message.warning(msg);
                            } else {
                                app.form_modal = false;
                                app.$Message.success('操作成功');
                                app.getUserList()
                            }
                            app.send_loading = false;
                        });
                    }
                })
            },
            delConfirm() {
                console.log('删除！');
                // this.delItem()
            },
            delItem() {
                let app = this;
                app.send_loading = true;
                delUser(JSON.stringify(app.select_users)).then(res => {
                    app.send_loading = false;
                    app.del_model = false;
                    if (res.ret === 200) {
                        app.$Message.success('删除成功');
                        app.getUserList()
                    } else {
                        app.$Message.warning(res.msg);
                    }
                });
            },
            search: _.debounce(
                function () {
                    this.page_num = 1;
                    this.getUserList()
                },
                // 这是我们为用户停止输入等待的毫秒数
                500
            ),
            selectItem(selection) {
                let app = this;
                app.select_users = [];
                $.each(selection, function (k, v) {
                    app.select_users.push(v.id)
                });
            },
            changePage(page) {
                this.page_num = page;
                this.getUserList()
            },
            changePageSize(page_size) {
                this.page_num = 1;
                this.page_size = page_size;
                this.getUserList()
            },
            reloadList() {
                this.getUserList(1, this.page_size)
            },
            rowClassName(row, index) {
                return 'rowClassName';
            },
            changeState(id, state, index) {
                let app = this;
                const change_state = state == 1 ? 0 : 1;
                changeUserState(id, state == 1 ? 0 : 1).then(res => {
                    app.user_list[index].state = change_state
                });
            },
            addContent() {//添加新会员
                this.$router.push({path: '/system/stock/add/0'})
            },
            operation(id, type) {
                console.log(id, type);
            }
        }
    }
</script>













